<template>
	<cover-view class="tabBarRow">
		<cover-view v-for="(item, index) in list" :key="index" class="tabBarCell"
			:class="['tabBarItem', index == tabbarIndex ? 'selctedIcon' : 'icon']" @click="changeTabBar(index)">
			<cover-image :src="index == tabbarIndex ? item.selectedIcon : item.icon"></cover-image>
		</cover-view>
	</cover-view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	const tabbarIndex = ref(getApp().globalData.tabbarIndex); //获取全局变量tabbarIndex
	const list = reactive([{
			label: "首页",
			path: "/pages/tabbar/index",
			icon: "/static/icons/index.png",
			selectedIcon: "/static/icons/index-active.png",
		},
		{

			label: "日历",
			path: "/pages/tabbar/calendar",
			icon: "/static/icons/calendar.png",
			selectedIcon: "/static/icons/calendar-active.png",

		}, {

			label: "成长森林",
			path: "/pages/tabbar/growingforest",
			icon: "/static/icons/forest.png",
			selectedIcon: "/static/icons/forest-active.png",

		},
		{
			label: "我的",
			path: "/pages/tabbar/mine",
			icon: "/static/icons/mine.png",
			selectedIcon: "/static/icons/mine-active.png",
		},
	]);

	function changeTabBar(index) {
		console.log("changeTabBar", index);
		getApp().globalData.tabbarIndex = index; //切换菜单时修改全局变量tabbarIndex
		uni.switchTab({
			url: list[index].path,
		});
	}
</script>

<style scoped>
	.tabBarRow {
		flex-direction: row;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		align-items: center;
		justify-items: center;
		width: 100%;
		height: 124rpx;
		position: fixed;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		/* padding-bottom: 40rpx */
		display: flex;
		justify-content: space-around;
	}

	.tabBarItem {
		height: 100rpx;
		width: 100rpx;
		position: relative;
		top: -5rpx;
	}

	.selctedIcon {
		height: 96rpx;
		width: 96rpx;
	}

	.icon {
		height: 96rpx;
		width: 96rpx;
	}

	.tabBarItem image {
		height: 100%;
		width: 100%;
	}
</style>